<template>
  <div class="line-Loss">
    <el-tabs
      v-model="activeName1"
      :tab-position="tabPosition"
      class="line-Loss-w"
    >
      <el-tab-pane
        v-for="(item, index1) in tabData"
        :label="item.name + (item.position ? '[' + item.position + ']' : '')"
        :name="index1 + '-' + (item.type ? item.type : '')"
      >
        <template v-if="item.children.length > 0">
          <el-tabs
            v-model="activeName"
            :tab-position="tabPosition"
            class="tabs-scroll tabs-scroll-w"
          >
            <el-tab-pane
              v-for="(item1, index) in item.children"
              :label="item1.name + '[' + item1.position + ']'"
              :name="item1.type + '-' + item1.position + '-' + index"
            >
              <div v-if="item1.type === 2">
                <CollectSet
                  v-if="
                    activeName ===
                    item1.type + '-' + item1.position + '-' + index
                  "
                  :currentData="item1"
                ></CollectSet>
              </div>
              <div v-else>
                <SummarySet
                  v-if="
                    activeName ===
                    item1.type + '-' + item1.position + '-' + index
                  "
                  :currentData="item1"
                ></SummarySet>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <SummarySet :currentData="item"></SummarySet>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from "vue";
import { useAppStore } from "@/stores";
import { lineLossData } from "@/gm/meterLabel.js";
import CollectSet from "./collectSet.vue";
import SummarySet from "./summarySet.vue";
import { storeToRefs } from "pinia";
import { meterPositionListSet } from "@/api/source.js";

const useApp = useAppStore();
let { tableFault, currentPlanId } = storeToRefs(useApp);

const tabPosition = ref("left");
const tabData = ref([]);
const activeName = ref("");
const activeName1 = ref("0-");
// console.log(lineLossData);
const tableData = lineLossData;
const radio = ref(1);
const collectSetRef = ref();
const summarySetRef = ref();
//数据初始化
onMounted(() => {
  //数据监听
  watch(
    tableFault,
    (newValue, oldValue) => {
      tabData.value = newValue;
      if (tabData.value[0]) {
        activeName.value =
          tabData.value[0].children[0].type +
          "-" +
          tabData.value[0].children[0].position +
          "-0";
        activeName1.value = "0-" + tabData.value[0].type;
      }
    },
    { immediate: true },
    { deep: true }
  );
  watch(
    activeName1,
    (newValue, oldValue) => {
      let arr = newValue.split("-");
      if (arr[1] === "1" || arr[1] === "5") {
        if (tabData.value[arr[0]]) {
          activeName.value =
            tabData.value[arr[0]].children[0].type +
            "-" +
            tabData.value[arr[0]].children[0].position +
            "-0";
        }
      }
    },
    { immediate: true },
    { deep: true }
  );

  // meterPositionListSetApi();
});
//表位故障
const meterPositionListSetApi = async () => {
  let parm = {
    planId: currentPlanId.value,
  };
  await meterPositionListSet(parm)
    .then((res) => {
      tabData.value = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss" scoped>
//功率源
.line-Loss {
  .ll-control {
    margin-top: 10px;
    border: 1px solid #ebeef5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .ll-control-item {
      display: flex;
      .ll-group {
        display: flex;
        flex-direction: column;
      }
      .item2,
      .item3 {
        p {
          display: flex;
          padding: 5px 0px;
          .el-input {
            width: 100px;
          }
        }
      }
      .el-button {
        width: 100px;
      }
      .item2 {
        .el-button {
          width: 50px;
        }
      }
    }
    .ll-item2 {
      width: 700px;
      justify-content: space-evenly;
      align-items: center;
    }
  }
}
</style>
<style lang="scss">
.tabs-scroll {
  .el-tabs__header {
    .el-tabs__nav {
      height: 400px;
      overflow: auto;
    }
  }
  .ll-btn1 {
    .el-tabs__nav {
      height: auto;
      overflow: hidden;
    }
  }
}
</style>
